<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <form action="/xxx" @submit.prevent="handleSubmit">
            <span>用户名：</span>
            <input type="text" v-model="username"><br>

            <span>密码：</span>
            <input type="password" v-model="pwd"><br>

            <span>性别：</span>
            <input type="radio" id="femal" value="女" v-model="sex">
            <label for="femal">女</label>
            <input type="radio" id="male" value="男" v-model="sex">
            <label for="male">男</label>

            <span>爱好：</span>
            <input type="checkbox" id="backet" value="basket" v-model="likes">
            <label for="basket">篮球</label>
            <input type="checkbox" id="foot" value="foot" v-model="likes">
            <label for="foot">足球</label>
            <input type="checkbox" id="pingpang" value="pingpang" v-model="likes">
            <label for="pingpang">乒乓</label><br>

            <span>城市：</span>
            <select v-model="cityId">
                <option value="">未选择</option>
                <option :value="city.id" v-for="(city,index) in allCitys" :key="index">{{city.name}}</option>
            </select><br>
            <span>介绍:</span>
            <textarea rows="10" v-model="desc"></textarea> <br><br>
            <button type=" submit" value="注册">注册</button>
        </form>
    </div>
    <script>
        let vue = new Vue({
            el: '#app',
            data: {
                username:'',
                pwd:'',
                sex:'女',
                likes:['basket'],
                allCitys:[{id:1 , name:'北京'},{id:2 , name:'上海'},
                {id:3 , name:'广州'},{id:4 , name:'深圳'},],
                cityId:'3',
                desc:'',
            },
            methods:{
                handleSubmit(){
                    console.log(this.username , this.pwd,this.sex,this.likes,this.desc );
                }
            }
        });
    </script>
</body>

</html>